<template>
	<div class="text-question">
		<div class="options-grid">
			<div
				class="item"
				:class="{
					active: value.includes(number[index]),
					readonly: readonly
				}"
				v-for="(item, index) in answerList"
				:key="index"
				@click="onClick(item, index)"
			>
				<div class="number">{{ number[index] }}</div>
				<div class="option-text">{{ item }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import mixins from "@/mixins"
export default {
	name: "text-question",
	mixins: [mixins],
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: Array,
			default: () => [],
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			number: ["A", "B", "C", "D", "E", "F"],
		}
	},
	computed: {
		nowQuestion() {
			return this.$store.getters["exam/nowQuestion"]
		},
		answerList() {
			return this.number.map(item => this.nowQuestion["answer" + item]).filter(item => item)
		},
		type() {
			if (this.nowQuestion.questionType === "单选题") {
				return "single"
			} else if (this.nowQuestion.questionType === "多选题") {
				return "multiple"
			}
		},
	},
	methods: {
		isActive(index) {
			return {
				active: this.value.includes(this.number[index]),
			}
		},
		onClick(item, index) {
			if (this.readonly) {
				return
			}
			const data = this.number[index]

			if (this.type === "single") {
				this.$emit("update:value", [data])
				this.$emit("on-change", [data])
			} else {
				let value = this.value
				if (value.includes(data)) {
					value = value.filter(i => i !== data)
				} else {
					value.push(data)
				}
				this.$emit("update:value", value.sort())
				this.$emit("on-change", value.sort())
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.text-question {
	// 为选项容器添加内边距，确保选项不会紧贴边缘
	padding: 20rpx 0;
}

// 创建网格布局
.options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
	grid-gap: 20rpx;
}

// 胶囊型选项样式
.item {
  font-size: 30rpx;
  padding: 24rpx 30rpx;
  margin: 10rpx 0;
  border-radius: 40rpx; // 较大的圆角形成胶囊形状
  border: 2px solid #e0e0e0;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  min-height: 120rpx;
  position: relative;
  overflow: hidden;
  
  // 确保内容在波纹效果之上
  .number,
  .option-text {
    position: relative;
    z-index: 1;
  }
  
  // 移除悬浮效果
  
  // 优化点击效果，使其更明显
  &:not(.readonly):active {
    transform: translateY(0) scale(0.97); // 增加缩放效果
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); // 减小阴影
  }
  
  // 选项中的字母标识
  .number {
    font-weight: bold;
    margin-right: 16rpx;
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  
  // 选项文本
  .option-text {
    flex: 1;
    word-break: break-word;
    line-height: 1.5;
  }
  
  // 选中状态
  &.active {
    color: #fff;
    border-color: $color;
    background-color: $color;
    box-shadow: 0 4rpx 16rpx rgba(255, 173, 1, 0.3);
    
    .number {
      color: $color;
      background-color: #fff;
    }
  }
}

// 只读状态样式
.readonly {
	cursor: not-allowed;
	opacity: 0.8;
}

// 适应不同屏幕尺寸
@media screen and (max-width: 320px) {
	.options-grid {
		grid-gap: 16rpx;
	}
	.item {
		padding: 20rpx 24rpx;
		font-size: 28rpx;
	}
}
</style>
